<template>
  <div>
    <!-- 返回顶部 -->
    <template>
      <el-backtop></el-backtop>
    </template>
    <!-- 轮播图 -->
    <el-carousel :interval="4000" type="card" height="240px">
      <el-carousel-item>
        <img
          class="swiper"
          src="../../assets/images/articleList/swiper2.png"
          alt=""
        />
      </el-carousel-item>
      <el-carousel-item>
        <img
          class="swiper"
          src="../../assets/images/articleList/swiper1.png"
          alt=""
        />
      </el-carousel-item>
      <el-carousel-item>
        <img
          class="swiper"
          src="../../assets/images/articleList/swiper3.png"
          alt=""
        />
      </el-carousel-item>
    </el-carousel>
    <!-- 文章列表 -->
    <div class="articlelist">
      <el-collapse v-model="activeNames" @change="handleChange" accordion>
        <el-collapse-item
          v-for="(item, index) in reptileList"
          :key="index"
          :title="item.tit"
          :name="(index + 1).toString()"
        >
          <div class="news-tit" @click="goBaidu" :data-url="item.url">
            &nbsp;&nbsp;&nbsp;&nbsp;{{ item.content
            }}<i class="el-icon-s-order"></i>
          </div>
          <div class="right">
            <i class="el-icon-user-solid"></i>{{ item.author }}
          </div>
          <div class="right">
            <i class="el-icon-view"></i> 阅读数<span class="skyblue"
              >&nbsp;{{ item.read }}&nbsp;</span
            >/<i class="el-icon-chat-dot-round"></i>评论数<span class="skyblue"
              >&nbsp;{{ item.comment }}&nbsp;</span
            >
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ["1"],
      reptileList: ""
    };
  },
  created() {
    let that = this;
    // 载入遮罩
    const loading = that.$loading({
      lock: true,
      text: "Loading",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)"
    });
    that.$axios.get("/blog/articleList").then(res => {
      if (res.data.success && res.data.reptileList.length) {
        that.reptileList = res.data.reptileList;
        loading.close();
      }
    });
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    goBaidu(e) {
      window.location.href = e.srcElement.dataset.url;
    }
  }
};
</script>

<style lang="less">
.right {
  text-align: right;
  color: #8a8a8a;
}
.swiper {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.el-collapse-item__header {
  height: 60px;
  background: transparent;
  font-size: 16px;
  // border-bottom: 1px solid #000;
}
.el-collapse-item__wrap,
.el-collapse-item__content {
  background: transparent;
  // border-bottom: 1px solid #000;
}

.news-tit {
  cursor: pointer;
}

.news-tit:hover {
  color: #409eff;
}

.skyblue {
  color: #3399ea;
}
</style>